在前一篇，我們已經示範了如何在 Angular 中套用自訂元件。
這一篇，我們要來看看如何在 Vue 中使用自訂元件。

在 Vue 使用自訂元件建立會員註冊表單

那麼今天，我們就在 Vue 中加入一個登錄發票的表單試試看吧！我們會使用 Vue 3 這個版本來做示範。
表單欄位如下：

• 登記人：至少兩個字元，必填。
• 發票號碼：/^\/{1}[0-9A-Z]{7}$/，必填。
• 統一編號：/^[0-9]{8}$/，非必填。
• 備註：支援多行，最多 100 字元，非必填。

基本配置

1. 首先你需要先安裝 Vue cli

npm install -g @vue/cli

2. 建立一個 Vue 專案

vue create custom-input

3. 安裝自訂元件 un-custom-input

npm install un-custom-input

4. 在 src/main.ts 或 main.js 載入自訂元件

import { createApp } from 'vue';
import App from './App.vue';
import 'un-custom-input';

createApp(App).mount('#app');

5. 在 vue.config.js 加入自訂元件的宣告
   和 Angular 一樣，你需要告訴 Vue 這是一個自訂元件，避免 template 報錯。

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // 在這一段的定義讓 un- 開頭的自訂元素合法化
          isCustomElement: (tag) => tag.startsWith('un-')
        }
      }))
  }
})

6. 在 template 中加入自訂元件看看是否有出現

<template>
  <un-custom-input></un-custom-input>
</template>

做到這一步，我們也成功的在 Vue 中使用自訂元件了！

將自訂元件加入 Vue Template

  <form class="form">
    <div class="input-container">
      <label>登記人</label>
      <un-custom-input
        min-length="2"
        placeholder="請填寫登記人"
        required
      >
      </un-custom-input>
    </div>
    <div class="input-container">
      <label>發票號碼</label>
      <un-custom-input
        placeholder="請填寫發票號碼"
        required
        pattern="^[a-zA-Z0-9_]{4,}$"
        pattern-message="請填寫正確的發票號碼格式"
      >
      </un-custom-input>
    </div>
    <div class="input-container">
      <label>統編</label>
      <un-custom-input
        placeholder="請填寫統編"
        pattern="/^[0-9]{8}$/"
        pattern-message="請填寫正確的統編格式，8 碼"
      >
      </un-custom-input>
    </div>
    <div class="input-container">
      <label>備註</label>
      <un-custom-input
        allowMulti="true"
        maxlength="100"
      >
      </un-custom-input>
    </div>

    <button class="submit-btn">送出</button>
  </form>

樣式一樣使用前一篇 angular 的 style! 詳見：Day 24

加完結構跑起來後發現：

奇怪! placeholder 怎麼完全沒有改變 ( ´ﾟДﾟ)！！！！！！！！
後來發現原來是因為：

• Vue 在使用 Web Component 時，會將屬性（attributes）作為靜態屬性傳遞給 Web Component，但它不會自動將這些屬性的變化反映到 Web Component 的內部狀態，除非 Web Component 明確監聽這些屬性的變化！
  由於在自訂元件中監聽 placeholder 的值都只有在一開始使用 getAttribute 來取值，沒有監聽 palceholder 屬性的變化，導致內容沒有任何改變。

• Vue 使用的是響應式系統，當我們通過 :placeholder 動態綁定屬性時，Vue 會更新 DOM 的屬性，但 Web Component 的內部要主動監聽這些變化（使用 attributeChangedCallback）。

• Angular 的變更檢測機制比 Vue 更積極，所以當我們設置了 placeholder 的屬性，Angular 會確保 DOM 的屬性值被更新，所以在前一篇實作時，才沒有遇到這個問題。

先回頭修改一下元件，讓屬性們都可以被監聽吧！

讓我們回到自訂元件重新加上屬性的監聽，讓自訂元件能夠正常在 Vue 中運作。
具體內容可參考 Github 專案原始碼。

修正後重新發布版本，再次套用到 Vue 專案中。
這次就能順利看到 placeholder 啦！

說說在 Vue 中如何監聽自訂事件

在 Vue 中可以直接使用 @事件名稱，來監聽到自訂元件內部的自訂事件。
我們拿其中一個欄位來加入 value-changed 事件（這是之前有加入過的自訂事件，別忘囉）。

<un-custom-input
    min-length="2"
    placeholder="請填寫登記人"
    required
    @value-changed="onValueChanged"
>
</un-custom-input>

在 <script setup> 中加入事件方法。

function onValueChanged(e) {
  console.log('自訂方法觸發囉！', e.detail);
}

以上，就是在 Vue 中使用自訂元件的方法。
有了基礎結構也知道如何監聽自訂事件，那麼接下來完善表單就交給大家練習囉。
明天，讓我們看看如何在 React 中加入自訂元件！